import React from 'react'
import menuList from '../../config/menuConfig';
import {fetch, post} from '../../my_axios/api'
import {Menu, Icon, Button,message} from 'antd';
import {NavLink} from 'react-router-dom'
import {setBreadcrumb} from'../../redux/action/index'
import './index.less'
import MenuConfig from './../../config/menuConfig'
import DrawerMenu from 'rc-drawer';
import {connect} from 'react-redux'
import 'rc-drawer/assets/index.css';
import createHistory from 'history/createHashHistory'
const history = createHistory();
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
class NavLeft extends React.Component {
    state={
        userPermission:{}
    };
    componentWillMount() {
        // const menuTreeNode = this.renderMenu(MenuConfig);
        // this.setState({
        //     menuTreeNode,
        // });
        this.getUserPermission();
    }
    /**
     * 获得用户的权限
     */
    getUserPermission(){
        fetch('permission/current').then(res => {
            if (res.status === 'success') {
                this.setState({
                    userPermission:res.data
                })
            } else {
                message.error(res.data.message);
                history.push('/login')
            }
        }).catch(err => {
            console.log(err);
        });
    }
    menuClick(childrenItem){
        const {dispatch}=this.props;
        if(childrenItem.name==='首页'){
            dispatch(setBreadcrumb(null));
        }else{
            dispatch(setBreadcrumb(childrenItem.name,'/admin'+childrenItem.route));
        }
    }
    getMenu = () => {
        if(this.props.navLeft==='isMobile'){
            return(
                <DrawerMenu
                    width="256"
                    height="100%"
                    getContainer={null}
                    level={null}
                    handleChild={<i className="drawer-handle-icon" />}

                    onHandleClick={() => {
                        this.props.updateOpen();
                    }}
                    open={this.props.open}
                    onMaskClick={() => {
                        this.props.updateOpen();
                    }}
                >
                    <div>
                        <div className="logo">
                            <img src="/assets/logo.svg" className="icon_image"></img>
                            <h1>海越IOT</h1>
                        </div>
                        <Menu
                            onClick={(item)=>{
                                this.props.updateOpen()
                            }}
                            theme="dark"
                            mode="inline">
                            {this.renderMenu(this.state.userPermission.children)}
                        </Menu>
                    </div>
                </DrawerMenu>
            )
        }else{
            return (
                <div>
                    <div className="logo">
                        <img src={require("../../image/logo.png")} className="icon_image"></img>
                        {this.props.navLeft==='isNarrow'?null:<h1>锦湖目视化</h1>}
                    </div>
                    <Menu
                        inlineCollapsed={this.props.navLeft==='isNarrow'}
                        theme="dark"
                        mode="inline">
                        {this.renderMenu(this.state.userPermission.children)}
                    </Menu>
                </div>
            )
        }


    };


    //菜单渲染
    renderMenu = (data) => {//这种方式不需要bind
        if(data){
            return data.map((item) => {
                if(item.checked){
                    return (
                        <SubMenu    key={item.id} title={<span><Icon type={item.icon}/><span>{item.name}</span></span>}>
                            {
                                item.children ?
                                    item.children.map((childrenItem)=>{
                                        if(childrenItem.checked){
                                            return(
                                                <Menu.Item key={childrenItem.id} onClick={this.menuClick.bind(this,childrenItem)} title={childrenItem.name}>
                                                    <NavLink to={'/admin'+childrenItem.route}>
                                                        {childrenItem.name}
                                                    </NavLink>
                                                </Menu.Item>
                                            )
                                        }

                                    }):null
                            }

                        </SubMenu>
                    )
                }

            })
        }
    };

    // renderMenu = (data) => {//这种方式不需要bind
    //     if(data){
    //         return data.map((item) => {
    //             if (item.children) {
    //                 return (
    //                     <SubMenu key={item.id} title={<span><Icon type='smile-o'/><span>{item.name}</span></span>}>
    //                         {this.renderMenu(item.children)}
    //                     </SubMenu>
    //                 )
    //             }
    //             return (
    //                 <Menu.Item key={item.id} title={item.name}>
    //                     <NavLink to={item.route}>
    //                         {item.name}
    //                     </NavLink>
    //                 </Menu.Item>
    //
    //             )
    //         })
    //     }
    // };


    render() {
        return (
            <div>
                {this.getMenu()}
            </div>
        )
    }
}
const mapStateToProps= (state)=>{
    return{
        navLeft:state.navLeft,
    }
};
export default connect(mapStateToProps)(NavLeft)